<template>
    <div v-if="data">
        <div class="header-w">商品详情</div>
        <div class="order-list" >
            <div class="item" v-for="(item, index) in data.gdItems" :key="index">
                <div class="left">
                    <img class="good-img" :src="item.img" alt="">
                    <div class="gd-info">
                        <div class="name">{{item.name}}</div>
                        <div class="ms">x1</div>

                    </div>
                </div>
                <div class="ms">￥{{ item.subtotal }}</div>
            </div>
            <div class="order-total">订单总金额：<b>{{ data.total.$numberInt }}</b></div>
        </div>
        <div class="address-box">
            <div class="address">下单时间 <span>{{ parseTime(data.creatTime.$numberLong) }}</span> </div>
            <div class="address">配送营地 <span>{{ data.campInfo[0].groupCode_txt }} - {{ data.campInfo[0].title }}</span></div>
            <div class="address">联系电话 <span>{{ data.phone }} </span></div>
            <div class="address">订单状态 <span>{{ data.status.$numberInt == 1 ? '待配送' : '已配送' }} </span></div>
            <!-- <div class="address">备注 <span>asdasda</span></div> -->
        </div>
        <div class="start-ps" v-if="data.status.$numberInt == 1">
            <div class="ios">
                <div class="btn" @click="modelPop = true">开始配送</div>
            </div>
        </div>

        <div class="model" v-if="modelPop">
            <div class="black"></div>
            <div class="content">
                <div class="title">温馨提示</div>
                <div class="">是否确定商品已配齐，准备开始配送</div>
                <div>
                    <el-button type="primary" plain class="btn" @click="modelPop = false">取消</el-button>
                    <el-button type="primary" class="btn" @click="sureClick">确定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { parseTime } from '@/utils/index';
    import request from '@/utils/request';
    export default {
        data() {
            this.parseTime = (d) => parseTime(d)
            return {
                data: '',
                modelPop: false,
                orderCode: '',
            }
        },
        mounted() {
            this.getList();
            this.orderCode = this.$route.query.orderCode;
        },
        methods: {
            getList(num) {
                request.get('/order-list', {
                    params: {
                        pageNum: 1,
                        orderCode: this.orderCode,
                    },
                }).then((res) => {
                    this.data = res.data.list[0];
                })
            },
            sureClick() {
                let item = this.data;
                request.get('/order-list/dispatch', {
                    params: {
                        id: item._id,
                        openid: item.openid
                    }
                }).then((res)=> {
                    this.modelPop = false;
                    this.getList();
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
.model{
    .title{
        text-align: center;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .btn{
        margin-top: 20px;
    }
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    .black{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: .5);

    }
    .content{
        text-align: center;
        background: #fff;
        position: relative;
        z-index: 1;
        padding: 20px;
        border-radius: 5px;
    }
}
.start-ps{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;

    .btn{
         height: 45px;
        text-align: center;
        line-height: 45px;
        background-color: #409EFF;
        color: #fff;
    }
}
.order-total{
    text-align: right;
    padding: 0 10px;
    margin-top: 10px;
}
.address-box{
    padding: 10px;
    color: #6d6d6d;
    font-size: 14px;
    .address{
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
    }
}
.order-list{
    padding-bottom: 10px;
    border-bottom: 1px solid #f7f7f7;
}
.gd-info{
    .name{
        font-size: 14px;
        font-weight: bold;
        color: #000;
    }
    .ms{
        color: #878787;
        margin-top: 5px;
    }
}
.item{
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: space-between;
    .left{
        flex: 1;
        display: flex;
        
    }
}
.header-w{
    height: 45px;
    text-align: center;
    line-height: 45px;
    box-shadow: 0 0 10px #f0f0f0;
}
.good-img{
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
</style>